<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="取水权人代码" prop="ownerCode">
          <el-input v-model="ruleForm.ownerCode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="取水权人名称" prop="ownerName">
          <el-input v-model="ruleForm.ownerName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="取水字号" prop="ownerFont">
          <el-input v-model="ruleForm.ownerFont"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="取水地点" prop="intLocation">
          <el-input v-model="ruleForm.intLocation"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="取水地址区划" prop="intAddvcd">
          <el-input v-model="ruleForm.intAddvcd"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="年许可取水量" prop="yearHave">
          <el-input v-model="ruleForm.yearHave"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="保证率" prop="baozen">
          <el-input v-model="ruleForm.baozen"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="取水类型" prop="intType">
          <MultiSelect
            v-model="ruleForm.intType"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="水源类型" prop="waterType">
          <MultiSelect
            v-model="ruleForm.waterType"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="取水用途" prop="waterValue">
          <MultiSelect
            v-model="ruleForm.waterValue"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="有效期限自" prop="ableDateFrom">
          <AdatePicker v-model="ruleForm.ableDateFrom" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="有效期限至" prop="ableDateTo">
          <AdatePicker v-model="ruleForm.ableDateTo" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="发证机关" prop="fazen">
          <el-input v-model="ruleForm.fazen" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="统一社会信用代码" prop="tongyiCode">
          <el-input v-model="ruleForm.tongyiCode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="办理机关" prop="banli">
          <el-input v-model="ruleForm.banli"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="统一社会信用代码" prop="banliTy">
          <el-input v-model="ruleForm.banliTy"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="原证件编号" prop="preCode">
          <el-input v-model="ruleForm.preCode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="原证件发证日期" prop="preDate">
          <AdatePicker v-model="ruleForm.preDate" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="首次发证日期" prop="firstDate">
          <AdatePicker v-model="ruleForm.firstDate" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="发证日期" prop="codeDate">
          <AdatePicker v-model="ruleForm.codeDate" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="备注" prop="markdown">
          <el-input
            type="textarea"
            :rows="2"
            placeholder=""
            v-model="ruleForm.markdown"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import MultiSelect from '@/components/Select/MultiSelect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
const requiredObj = {
  required: true,
  message: '此项为必填项',
  trigger: 'none',
};
export default {
  components: { MultiSelect, AdatePicker },
  data() {
    return {
      ruleForm: {
        ownerCode: null, // 取水权人代码
        ownerName: null, // 取水权人名称
        ownerFont: null, // 取水字号
        intLocation: null, // 取水地点
        intAddvcd: null, // 取水地址区划
        yearHave: null, // 年许可取水量
        baozen: null, // 保证率
        intType: null, // 取水类型
        waterType: null, // 水源类型
        waterValue: null, // 取水用途
        ableDateFrom: null, // 有效期起
        ableDateTo: null, // 有效期至
        preCode: null, // 原证件编号
        preDate: null, // 原证件发证日期
        firstDate: null, // 首次发证日期
        codeDate: null, // 发证日期
        fazen: null, // 发证机关
        tongyiCode: null, // 统一社会信用代码
        banli: null, // 办理机关
        banliTy: null, // 统一社会信用代码
        markdown: null, // 备注
      },

      rules: {
        ownerCode: [requiredObj], // 取水权人代码
        ownerName: [requiredObj], // 取水权人名称
        ownerFont: [], // 取水字号
        intLocation: [requiredObj], // 取水地点
        intAddvcd: [requiredObj], // 取水地址区划
        yearHave: [requiredObj], // 年许可取水量
        baozen: [], // 保证率
        intType: [requiredObj], // 取水类型
        waterType: [requiredObj], // 水源类型
        waterValue: [requiredObj], // 取水用途
        ableDateFrom: [requiredObj], // 有效期起
        ableDateTo: [requiredObj], // 有效期至
        preCode: [], // 原证件编号
        preDate: [], // 原证件发证日期
        firstDate: [requiredObj], // 首次发证日期
        codeDate: [requiredObj], // 发证日期
        fazen: [], // 发证机关
        tongyiCode: [requiredObj], // 统一社会信用代码
        banli: [requiredObj], // 办理机关
        banliTy: [requiredObj], // 统一社会信用代码
        markdown: [requiredObj], // 备注
      },
      options: [{ value: '选项1' }, { value: '选项2' }, { value: '选项3' }],
    };
  },
  methods: {
    //  保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 清空
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
